<template>
   <div>
    <!-- inline:代表的是行内表单，代表一行可以放置多个表单元素 -->
    <el-form :inline="true"  class="demo-form-inline" :model="cForm" ref="cForm" size="small">
        <el-form-item label="一级分类" prop="category1ID">
            <el-select placeholder="请选择" v-model="cForm.category1ID" @change="handler1" >
                <el-option v-for="(c1) in list1" :key="c1.id" :label="c1.name" :value="c1.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="category2ID">
            <el-select  placeholder="请选择" v-model="cForm.category2ID" @change="handler2">
                <el-option v-for="(c2) in list2" :key="c2.id" :label="c2.name" :value="c2.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="三级分类" prop="category3ID">
            <el-select  placeholder="请选择" v-model="cForm.category3ID" @change="handler3">
                <el-option v-for="(c3) in list3" :key="c3.id" :label="c3.name" :value="c3.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
            <el-button  @click="resetForm('cForm')" size="mini">重置</el-button>
        </el-form-item>
    </el-form>
   </div>
</template>

<script>
export default {
    //三级分类的全局组件
    name:'CategorySelect',
    props:['show'],
    data() {
      return {
        // 一级分类的数据
        list1:[],
        // 二级分类的数据
        list2:[],
        // 三级分类的数据
        list3:[],
        // 收集相应的一级二级三级的id
        cForm:{
          category1ID:'',
          category2ID:'',
          category3ID:''
        }
      }
    },
    methods: {
      onSubmit() {
        // 触发自定义事件
        this.$emit('getCategoryId',this.cForm)
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('clearList',0)
        // console.log(this.$refs[formName]);
      },
    // 获取一级分类数据的方法
   async getCategory1List(){
          // 获取一级分类的请求：不需要携带参数
         let result =  await this.$API.attr.reqCategory1List();
         if(result.code ==200){
            this.list1 = result.data
         }
      },
    // 一级分类的select事件回调（当一级分类的option发生变化的时候获取相应二级分类的数据）
   async  handler1(){
      //用户重新选择时清除二级和三级数据
      this.list2 = [];
      this.list3 = [];
      this.cForm.category2ID = '';
      this.cForm.category3ID = '';
      //解构出一级分类的id
      const {category1ID} = this.cForm;
      //通过一级分类的id，获取二级分类的数据
      let result = await  this.$API.attr.reqCategory2List(category1ID)
      if(result.code == 200){
        this.list2 = result.data;
      }
    },
    // 二级分类的select事件回调（当二级分类的option发生变化的时候获取相应三级分类的数据）
   async  handler2(){
      //用户重新选择时清除三级数据
      this.list3 = [];
      this.cForm.category3ID = '';
      //解构出二级分类的id
      const {category2ID} = this.cForm;
      //通过二级分类的id，获取二级分类的数据
      let result = await  this.$API.attr.reqCategory3List(category2ID)
      if(result.code == 200){
          this.list3 = result.data
      }
    },
    // 三级分类的事件回调
    handler3(){
    
    }
    },
    // 组件挂载完毕：向服务器发请求，获取相应的一级分类的数据
    mounted(){
        // 获取一级分类的数据的方法
        this.getCategory1List();
    },
  
}
</script>

<style>

</style>